<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-t directive preserve content usage</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
    <style>
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
        transition: ease all 1s;
      }
      .red-bg {
        background-color: red;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <transition name="fade">
        <p v-if="toggle" v-t="'hello'" class="red-bg"></p>
      </transition>
      <button @click="toggle = !toggle">click me</button>
    </div>
    <script>
      const { createApp, ref } = Vue
      const { createI18n, useI18n } = VueI18n

      const i18n = createI18n({
        legacy: false,
        locale: 'en',
        messages: {
          en: { hello: 'hi there!' },
          ja: { hello: 'こんにちは！' }
        }
      })

      const app = createApp({
        setup() {
          const toggle = ref(true)
          return { toggle }
        }
      })
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
